<template>
  <div class="login">

    <el-header height="88px">
      <el-row type="flex">
        <el-col :span="24">
          <transition name="el-zoom-in-top">
            <h1 v-show="code==1">欢迎登录Heal</h1>
          </transition>
          <transition name="el-zoom-in-bottom">
            <h1 v-show="code==0">管理员登录</h1>
          </transition>
        </el-col>
      </el-row>
    </el-header>


    <el-container>

      <el-header>
        <el-row type="flex" justify="center">
          <el-col :span="10">
            <div><span id="T1" style="font-weight: 700">Heal You Want</span></div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="10">
            <div><span id="T2">生态健康生活视频网</span></div>
          </el-col>
        </el-row>

      </el-header>

      <el-main>

        <el-row type="flex" justify="center">
          <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="5">
            <el-input type="text" style="margin-bottom: 13px" placeholder="账号" clearable v-model="Person.name"
                      prefix-icon="el-icon-s-cooperation"></el-input>
          </el-col>
        </el-row>

        <el-row type="flex" justify="center">
          <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="5">
            <el-input type="password" placeholder="密码" clearable show-password v-model="Person.pwd"
                      prefix-icon="el-icon-key" @keydown.enter.native="login"></el-input>
          </el-col>
        </el-row>

        <!--    注册界面-->
        <el-dialog
            title="用户注册"
            :visible.sync="createDialogVisible"
            width="45%"
            center>
          <el-row>

            <el-col :span="12" :offset="6">
              <el-form status-icon ref="form" :model="form" label-width="120px" :rules="rules" label-position="top"
                       hide-required-asterisk>
                <el-form-item label="用户昵称" prop="user_name">
                  <el-input prefix-icon="el-icon-user" v-model="form.user_name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="user_pwd">
                  <el-input prefix-icon="el-icon-key" show-password v-model="form.user_pwd"
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码确认" prop="pwd_check">
                  <el-input prefix-icon="el-icon-key" show-password v-model="form.pwd_check"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <span slot="footer" class="dialog-footer">
        <el-button @click="createDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="register">确 定</el-button>
       </span>
        </el-dialog>

      </el-main>

      <el-footer>
        <el-row>
          <el-button style="background: #42b983" type="success" round @click="login">登录</el-button>
          <transition name="el-zoom-in-center">
            <el-button style="background: #2c3e50;color: #fff " plain type="success" round v-show="code==1"
                       @click="createDialogVisible=true">注册
            </el-button>
          </transition>
        </el-row>
      </el-footer>
    </el-container>


    <nav>
      <el-switch
          v-model="code"
          inactive-text="用户入口"
          active-text="管理员入口"
          inactive-value="1"
          inactive-color="#41b883"
          active-color="#35495e"
          active-value="0">
      </el-switch>
    </nav>


  </div>
</template>

<script>


export default {
  name: 'loginBlock',

  data() {
    var validatePass = (rule, value, callback) => {
      var regpwd = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}$/
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (!regpwd.test(value)) {
        callback(new Error('密码应包括大小写和数字并且长度不少于8位'))
      } else {
        if (this.form.pwd_check !== '') {
          this.$refs.form.validateField('pwd_check');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.form.user_pwd) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

    return {
      ip: this.GLOBAL.ip,
      port: this.GLOBAL.port,
      code: "",
      Person: {name: "", pwd: ""},

      createDialogVisible: false,


      form: {
        user_name: '',
        user_pwd: '',
        pwd_check: '',
      },

      rules: {
        user_name: [
          {required: true, message: '请输入用户昵称', trigger: 'blur'},
          {
            pattern: /^((?!fuck|sb|nb|傻).)*$/,    //正则校验不用字符串
            message: "包含敏感词", trigger: "blur"
          }
        ],

        user_pwd: [
          {validator: validatePass, trigger: 'blur'}
        ],
        pwd_check: [
          {validator: validatePass2, trigger: 'blur'}
        ],

      },


    };
  },

  methods: {
    login() {
      var that = this;
      if (this.Person.name == null || this.Person.name == "") {

        this.$message({
          message: '账号不能为空',
          type: 'warning'
        });
        // alert("账号不能为空");
      } else if (this.Person.pwd == null || this.Person.pwd == "") {
        this.$message({
          message: '密码不能为空',
          type: 'warning'
        });
        // alert("密码不能为空");
      } else {
        if (this.code == "1") {


          this.$http.post("http://" + that.ip + ":" + that.port + "/user/login",{
            user_name: that.Person.name,
            user_pwd: that.Person.pwd
          }, {timeout: 1000}).then((response) => {
            console.log(response);
            if (response.data.msg == "error_name") {
              this.$message.error(
                  '账号不存在');
            } else if (response.data.msg == "error_pwd") {
              this.$message.error(
                  '密码错误');
            } else if (response.data.msg == "ok") {
              that.$root.sessionId = response.data.user.user_uid;
              that.$root.sessionName = response.data.user.user_name;
              this.$message({
                message: "欢迎，尊贵的" + this.Person.name,
                type: 'success'
              });
              // alert("欢迎" + this.Person.name + "管理员登录");
              setTimeout(() => this.$router.push("/index"), 1000);
            } else if (response.data.msg == "error_unknow") {
              this.$message.error(
                  '未知错误');
              // alert("未知错误")
            } else {
              this.$message.error(
                  '500');
              // alert("500");
              return;
            }
          }).catch((err) => {
            console.log(err);
            this.$message.error(
                '网络异常，请检查全局ip和port');
          });


        } else if (this.code == "0") {
          this.$http.post("http://" + that.ip + ":" + that.port + "/admin/login", {
            admin_name: this.Person.name,
            admin_pwd: this.Person.pwd
          }, {timeout: 5000}).then((response) => {
            console.log(response);
            if (response.data.msg == "error_name") {
              this.$message.error(
                  '账号不存在');
            } else if (response.data.msg == "error_pwd") {
              this.$message.error(
                  '密码错误');
            } else if (response.data.msg == "ok") {
              that.$root.sessionId = response.data.admin.admin_aid;
              that.$root.sessionName = response.data.admin.admin_name;
              this.$message({
                message: "欢迎" + this.Person.name + "管理员登录",
                type: 'success'
              });
              // alert("欢迎" + this.Person.name + "管理员登录");
              setTimeout(() => this.$router.push("admin/main"), 1000);
            } else if (response.data.msg == "error_unknow") {
              this.$message.error(
                  '未知错误');
              // alert("未知错误")
            } else {
              this.$message.error(
                  '500');
              // alert("500");
              return;
            }
          }).catch((err) => {
            console.log(err);
            this.$message.error(
                '网络异常，请检查全局ip和port');
          });

        }
      }
    },

    register() {
      var that = this;
      this.$http.post("http://" + that.ip + ":" + that.port + "/user/register", that.form)
          .then(function (response) {
            console.log(response);
            if (response.data == "ok") {
              that.$message({
                message: "注册成功",
                type: 'success'
              });
              that.createDialogVisible = false;
              that.form.user_name = '';
              that.form.user_pwd = '';
              that.form.pwd_check = '';
            } else {
              that.$message({
                message: '该用户名已被注册咯，换个试试吧',
                type: 'warning'
              });
            }
          }).catch(function (err) {
        console.log(err);
      });
    },
  },

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

h1 {
  position: absolute;
  text-align: center;
  width: 100%;

}


</style>
